design: New Filter Bar Component by royendo · Pull Request #9173 · rilldata/rill

royendo · 2026-04-02T22:07:12Z

Add a reusable TableToolbar component (web-common/src/components/table-toolbar/) with composable sub-components: filter dropdown, expandable search, sort
toggle, applied filter chips, and view mode toggle
Replace the inline search + dropdown filter on the environment variables page with TableToolbar, adding sort direction toggle and applied filter chips with
"Clear all"
Replace the inline search on the public URLs page with TableToolbar, adding sort direction toggle
Add ResourceTableToolbar bridge component that wires TableToolbar to TanStack Table context with URL sync (?q= param) for alerts/reports pages
Add FilterOutlined icon from Rill design system

Search bar can be removed if req'd

Components:

TableToolbar — orchestrator with children snippet slot for inline extras (e.g. + button)
TableToolbarFilterDropdown — checkbox filter groups via DropdownMenu
TableToolbarSearch — collapsible search icon that expands to inline input
TableToolbarSort — "Newest"/"Oldest" text toggle with ArrowUpDown icon
TableToolbarAppliedFilters — removable filter pills + "Clear all"
TableToolbarViewToggle — grid/list view toggle (optional)

loom: https://www.loom.com/share/16b8de614c214305b385d966e7352b0a?from_recorder=1&focus_title=1

Will replace: #9156

Checklist:

Covered by tests
Ran it and it works as intended
Reviewed the diff before requesting a review
Checked for unhandled edge cases
Linked the issues it closes
Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
Intend to cherry-pick into the release branch
I'm proud of this work!

Replaces inconsistent toolbar UIs across alerts, reports, public URLs, and environment variables pages with a single reusable component. The toolbar provides: filter dropdown (left), search + sort + optional grid/list toggle (right). Filter options are page-specific via props. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- "Filter" is now plain clickable text opening a dropdown; applied filters show as removable chips with "Clear all" below the toolbar - "Newest" is a toggle button (not dropdown) that flips sort order - Search is a magnifying glass icon (h-9) that expands to an inline input; search text syncs to URL via ?q= param - Add `TableToolbarAppliedFilters`, `TableToolbarSearch`, `TableToolbarSort` sub-components - Remove old `TableToolbarSortDropdown` Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Use `untrack` and `get()` to break circular reactive dependencies: - `$table.setGlobalFilter()` was re-triggering its own effect via store subscription - URL sync effects were creating `searchText` <-> `$page` cycles Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Wrap DropdownMenu.Label inside DropdownMenu.Group to provide required Menu.Group context for GroupHeading - Use explicit oninput handler instead of bind:value for search to ensure reliable propagation through $bindable chain Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace $bindable chain (3-level deep binding wasn't propagating in TanStack pages) with onSearchChange callback. All consumers now use the callback to update search state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove local `searchText = text` write in `handleSearchChange` which created a Svelte 5 prop shadow, disconnecting the input from parent state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Revert alerts and reports tables to original `ResourceList` pattern - Replace filter icon with `ListFilter` from lucide-svelte - Filter pills: white bg, h-7, in h-9 container vertically centered - Reorder toolbar right side: Search, Newest, View toggle - Filter and Newest text use `text-fg-primary` - Env vars page: `+` button aligns top with `items-start` Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Filter pills: font-medium, border-t divider restored, h-7 in h-9 container - Add children snippet to TableToolbar for inline extras (e.g. + button) - Env vars: + button rendered inside toolbar so applied filters span full width - Reorder: Newest before Search Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add FilterOutlined.svelte from Rill design system SVG - Use it in TableToolbarFilterDropdown instead of lucide ListFilter - Wrap toolbar in section with gap-y-2 for spacing between rows Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add persistent <hr> between toolbar and applied filters - Replace complex mask-based SVG with clean stroked outline path - Reduce env vars page gap from gap-6 to gap-3 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…d white Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Remove trivial `handleSearchChange` wrapper, pass callback directly - Remove `$bindable` on `viewMode`, use callback pattern consistently - Sort: icon-only button (ArrowDownNarrowWide/ArrowUpNarrowWide), no text/border - Swap order: Search before Sort - Add `enableSorting` prop to BasicTable; env vars disables it - Fix disabled search button: proper `disabled` attr instead of CSS-only - Add `aria-label` to filter trigger and sort button - View toggle: `bg-gray-200` to `bg-surface-hover` for theme support - Trim barrel exports to `TableToolbar` + types only - Use optional chaining on `onSortToggle?.()` for consistency Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…arrow - Search icon: remove border/bg, match sort icon style - Revert sort to text "Newest"/"Oldest" + ArrowUpDown - Show hr/applied filters only when filterGroups exist - Revert BasicTable enableSorting prop (keep column sorting) - Remove sortDescFirst from Activity column so no arrow shows by default Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

When toolbar controls sort order, BasicTable clears its internal sorting state so column header arrows don't show. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace boolean `externalSort` with `externalSortKey` that reacts to value changes. Pass `sortDirection` through to BasicTable so clicking Newest/Oldest clears any active column header arrow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ericokuma · 2026-04-06T23:13:38Z

Why are we introducing a sort toggle when that can just be handled in the table column header?

royendo · 2026-04-07T13:41:28Z

Why are we introducing a sort toggle when that can just be handled in the table column header?

discussed with Di, this will only be for dashboards where we dont have that functionality; will hide it on the others

migrate public URL to same table type as env var

royendo · 2026-04-08T13:45:12Z

  ┌─────┬──────────────────────────────────┬────────────────────────────────────────────────────────────────────────────────┐                                
  │  #  │              Issue               │                                     Status                                     │
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤                                
  │ 1   │ externalSortKey init bug         │ Fixed (track prevExternalSortKey)                                              │
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤
  │ 2   │ ResourceTableToolbar unused      │ Removed                                                                        │                                
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤
  │ 3   │ TableToolbarViewToggle unused    │ Comment added (for dashboard view)                                             │                                
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤                                
  │ 4   │ Cell components Svelte 4→5       │ Migrated                                                                       │
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤                                
  │ 5   │ DateCell formatDate not reactive │ Fixed ($derived.by)                                                            │
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤                                
  │ 6   │ FiltersCell $: → $derived        │ Fixed                                                                          │
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤                                
  │ 7   │ <hr> divider always visible      │ Fixed                                                                          │
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤                                
  │ 8   │ Missing type="button"            │ Fixed — added to all 7 buttons across Search, Sort, AppliedFilters, ViewToggle │
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤                                
  │ 9   │ void externalSortKey confusing   │ Fixed (part of #1)                                                             │
  ├─────┼──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────┤                                
  │ 10  │ Lost env vars comments           │ Skipped (minor, filter logic is readable without them)                         │
  └─────┴──────────────────────────────────┴────────────────────────────────────────────────────────────────────────────────┘

Also applied to resource page

AdityaHegde

A couple of my previous comments are not addressed.

Also adding a filter moves the table since the filter selection+clear button show up. Feels a bit jarring. In explore we always show this bar. Do we want something similar here?

Di7design · 2026-04-14T18:48:21Z

Shifting is fine as long as it's animated, a smooth push-down (150–200ms ease-out) makes it feel intentional rather than a layout glitch. This also applies when filters overflow to a second row; the table should continue to shift down accordingly. If we go reserved space, we'd have dead whitespace when no filters are active, which feels worse. My vote is shift + animate.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

royendo and others added 12 commits April 2, 2026 16:00

fix: remove prop shadow in TableToolbar search handler

59d9882

Remove local `searchText = text` write in `handleSearchChange` which created a Svelte 5 prop shadow, disconnecting the input from parent state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

prettier

770d639

fix: use bg-surface-background for filter pills instead of hardcode…

4351c42

…d white Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

royendo requested a review from Di7design April 2, 2026 22:09

royendo and others added 4 commits April 2, 2026 18:24

feat: add externalSort prop to BasicTable to hide sort arrows

7eae959

When toolbar controls sort order, BasicTable clears its internal sorting state so column header arrows don't show. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

royendo changed the title ~~apply Filter redesign for env var and~~ apply Filter redesign for env var and public URL Apr 3, 2026

royendo added 2 commits April 3, 2026 11:58

+ New key

798257d

prettier

f64c721

royendo changed the title ~~apply Filter redesign for env var and public URL~~ design: apply Filter redesign for env var and public URL Apr 3, 2026

Merge branch 'main' into royendo/add-shared-table-toolbar

ed1f805

royendo added 5 commits April 7, 2026 11:11

hide newest/oldest based on table (if it needs it)

00f06a4

migrate public URL to same table type as env var

4 and

31087c1

remove sort logic from svelte since hidden

67cc60e

Update +page.svelte

78d5376

local code review

5114450

royendo changed the title ~~design: apply Filter redesign for env var and public URL~~ design: New Filter Bar Component Apr 7, 2026

Di7design approved these changes Apr 7, 2026

View reviewed changes

royendo requested a review from AdityaHegde April 7, 2026 19:49

AdityaHegde requested changes Apr 8, 2026

View reviewed changes

royendo added 2 commits April 8, 2026 09:39

as req; apply to logs and tables

34f65cc

button

dbaf5b8

Update ProjectTables.svelte

8f294fa

royendo mentioned this pull request Apr 8, 2026

design: Apply New Table Design in Rill Cloud #9181

Draft

8 tasks

royendo requested a review from AdityaHegde April 9, 2026 12:16

AdityaHegde requested changes Apr 13, 2026

View reviewed changes

Comment thread web-common/src/components/table/BasicTable.svelte

royendo and others added 3 commits April 15, 2026 09:46

asreq and animated filter

074f20c

Merge branch 'main' into royendo/add-shared-table-toolbar

8a08f76

code qual

ae6fbae

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

design: New Filter Bar Component#9173

design: New Filter Bar Component#9173
royendo wants to merge 30 commits intomainfrom
royendo/add-shared-table-toolbar

royendo commented Apr 2, 2026 •

edited

Loading

Uh oh!

ericokuma commented Apr 6, 2026

Uh oh!

royendo commented Apr 7, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

royendo commented Apr 8, 2026

Uh oh!

AdityaHegde left a comment

Uh oh!

Uh oh!

Di7design commented Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

royendo commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ericokuma commented Apr 6, 2026

Uh oh!

royendo commented Apr 7, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

royendo commented Apr 8, 2026

Uh oh!

AdityaHegde left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Di7design commented Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

royendo commented Apr 2, 2026 •

edited

Loading